<template>
  <div class="wang-editor">

  </div>
</template>

<script>
import E from 'wangeditor'
import {API_HOST} from '@/constant'

export default {
  name: 'index',
  props: {
    value: String,
    pasteFilterStyle: false,
    customerConfig: Function
  },
  data() {
    return {
      currValue: this.value,
      uploadUrl: API_HOST + '/file/uploadWangEditorFile'
    }
  },
  methods: {
    init() {
      const editor = this.editor = new E(this.$el)
      editor.config.pasteFilterStyle = this.pasteFilterStyle
      editor.config.uploadFileName = 'file'
      editor.config.uploadImgServer = this.uploadUrl
      editor.config.onchange = newHtml => {
        this.currValue = newHtml
        this.$emit('input', this.currValue)
      }

      this.customerConfig && this.customerConfig(editor)
      this.editor.create()

      this.setData(this.currValue)
    },
    setData(value) {
      this.editor.txt.html(value)
    }
  },
  watch: {
    value(val) {
      if(val !== this.currValue) {
        this.currValue = val
        this.setData(val)
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.wang-editor {
  height: 100%;
}
</style>
